<template>
    <el-container>
        <el-header>
          <div style="display: flex;">
            <h4 style="top: 15px;position: absolute">设备状态</h4>
            <el-input class="search-input"
            placeholder="请输入充电站名称"
            v-model="stationNameSearchInput"
            >
            <i slot="suffix" class="el-icon-search" @click="stationNameSearch"></i>
            </el-input>
          </div>

        </el-header>
        <el-container>
            <el-aside width="300px">
                <table style="text-align: center;width: max-content;" >
                    <tr>
                      <td colspan="3">
                        <el-avatar :src=logo :size=150></el-avatar>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <i class="el-icon-arrow-left" @click="stationLast"></i>
                      </td>
                      <td>
                        <h3>{{ chargingStation.stationName }}</h3>
                      </td>
                      <td>
                        <i class="el-icon-arrow-right el-icon--right" @click="stationNext"></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3">
                        <h5>{{ chargingStation.stationLocation}}</h5>
                      </td>
                    </tr>
                    <br>
                    <tr>
                      <td colspan="3">
                        <el-button @click="clickCar">汽车</el-button>
                        <el-button @click="clickElectric">电瓶车</el-button>
                        <el-button @click="clickBus">大型公交车</el-button>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="type-info1">
                          <div class="type-info-div">
                            <span  class="type-info-font" >{{chargingStation.mixedTypeNum}}</span>
                            <span>台</span>
                          </div>
                          <div style="padding-top: 10px;">混合型</div>
                        </div>
                      </td>
                      <td>
                        <div class="type-info2">
                          <div class="type-info-div">
                            <span class="type-info-font">{{chargingStation.directTypeNum}}</span>
                            <span>台</span>
                          </div>
                          <div style="padding-top: 10px;">直流桩</div>
                        </div>
                      </td>
                      <td>
                        <div class="type-info1">
                          <div class="type-info-div">
                            <span  class="type-info-font">{{ chargingStation.alternatingTypeNum }}</span>
                            <span>台</span>
                          </div>
                          <div style="padding-top: 10px;">交流桩</div>
                        </div>
                      </td>
                    </tr>
                    <br>
                    <tr>
                      <td colspan="3" class="today-info-td">
                        今日充电总次数
                        <span class="today-info-font">{{ chargingStation.totalTimeNum }}</span>
                        次
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" class="today-info-td">
                        今日充电量总数
                        <span class="today-info-font">{{ chargingStation.totalPowerNum }}</span>
                        kwh
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" class="today-info-td">
                        今日充电总时长
                        <span class="today-info-font">{{ chargingStation.totalHoursNum }}</span>
                        kwh
                      </td>
                    </tr>
                </table>
            </el-aside>
            <el-main>
              <el-container>
              <el-header>
                <div style="display: flex;">
                  <div class="status-info">
                  <img :src=orange_logo style="vertical-align:middle;">
                  <span>充电中</span>
                  </div>
                  <div class="status-info">
                    <img :src=green_logo style="vertical-align:middle;">
                    <span>空闲</span>
                  </div>
                  <div class="status-info">
                    <img :src=red_logo style="vertical-align:middle;">
                    <span>离线</span>
                  </div>
                  <div class="status-info">
                    <img :src=black_logo style="vertical-align:middle;">
                    <span>故障</span>
                  </div>
                  <div class="status-detail">
                    <span>当前充电桩共</span>
                    <span class="status-detail-font">{{ chargingStation.totalStatusNum }}</span>
                    <span>台，其中正在充电桩</span>
                    <span class="status-detail-font" style="color: orangered;">{{ chargingStation.orangedStatusNum }}</span>
                    <span>台，空闲桩</span>
                    <span class="status-detail-font" style="color: green;">{{ chargingStation.greenStatusNum }}</span>
                    <span>台，离线桩</span>
                    <span class="status-detail-font" style="color:red">{{ chargingStation.redStatusNum }}</span>
                    <span>台，故障桩</span>
                    <span class="status-detail-font" style="color:black">{{ chargingStation.blackStatusNum }}</span>
                    <span>台</span>
                  </div>
                </div>
                
              </el-header>
              <el-main>
                <Elcard :chargers="chargers"></Elcard>
              </el-main>
              <el-footer>
                <el-pagination
                    background
                    style="text-align: right;"
                    :page-sizes="[3, 5, 10, 20]"
                    :page-size="pageSize"
                    :current-page="pageNum"
                    layout="total, sizes, prev, pager, next"
                    :total="pageTotal"
                    @next-click="nextPage"
                    @prev-click="prevPage"
                    @current-change="skipPage"
                    @size-change="changeSizePage"
                    >
                    </el-pagination>
              </el-footer>
              </el-container>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Elcard from './elcard.vue';
export default {
  components:{
    Elcard
  },
  data() {
    return {
      logo:require('@/assets/BaiSuXin/station/chong_dian_zhan.jpg'),
      orange_logo:require('@/assets/BaiSuXin/status/orange.svg'),
      green_logo:require('@/assets/BaiSuXin/status/green.svg'),
      red_logo:require('@/assets/BaiSuXin/status/red.svg'),
      black_logo:require('@/assets/BaiSuXin/status/black.svg'),
      stationNameSearchInput:'',
      radio:1,
      chargingStation:{
        id:1,
        stationName:'知更鸟充电站',
        stationLocation:'广州天河XXX号',
        mixedTypeNum:100,
        directTypeNum:200,
        alternatingTypeNum:150,
        totalTimeNum:188,
        totalPowerNum:1888,
        totalHoursNum:313,
        totalStatusNum:50,
        orangedStatusNum:20,
        greenStatusNum:20,
        redStatusNum:20,
        blackStatusNum:22
      },
      chargers:[{}],
      pageSize:5,
      pageNum:1,
      pageTotal:50,
    }
  },
  created() {
    this.initStation()
  },
  methods: {
    initStation() {
      this.stationNameSearchInput='充电站'
      this.stationNameSearch()
    },
    stationNameSearch() {
      //根据输入框搜索充电站
      let stationNameSearch={}
      stationNameSearch.stationName=this.stationNameSearchInput
      this.$axios.post('/api/chargingStation/stationNameSearch', stationNameSearch)
      .then(resp => {
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargingStation=resp.data.data
          this.getchargerListByStationId()
        }
      })
    },
    getchargerListByStationId() {
      //根据充电站id获取名下的所有充电桩信息
      let param={}
      param.id=this.chargingStation.id
      param.time=this.getCurrentTime()
      param.chargerCategory='充电桩'
      let pageParam={}
      pageParam.pageSize=this.pageSize;
      pageParam.pageNum=this.pageNum;
      pageParam.param=param
      this.$axios.post('api/charger/chargerList',pageParam)
      .then(resp=>{
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargers=resp.data.data.list
          this.refreshChargerStatus(resp.data.data.list)
        }
      })
    },
    getCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      return `${hours}:${minutes}:${seconds}`;
    },
    stationLast() {
      //上一个充电站
      let param={}
      param.id=this.chargingStation.id
      param.order=0
      this.$axios.post('api/chargingStation/stationChange',param)
      .then(resp=>{
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargingStation=resp.data.data
          this.getchargerListByStationId()
        }
      })
    },
    stationNext() {
      //下一个充电站
      let param={}
      param.id=this.chargingStation.id
      param.order=1
      this.$axios.post('api/chargingStation/stationChange',param)
      .then(resp=>{
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargingStation=resp.data.data
          this.getchargerListByStationId()
        }
      })
    },
    clickCar() {
      //点击汽车
      let param={}
      param.id=this.chargingStation.id
      param.time=this.getCurrentTime()
      param.chargerCategory='汽车'
      let pageParam={}
      pageParam.pageSize=this.pageSize;
      pageParam.pageNum=this.pageNum;
      pageParam.param=param
      this.$axios.post('api/charger/chargerList',pageParam)
      .then(resp=>{
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargers=resp.data.data.list
          this.refreshChargerStatus(resp.data.data.list)
        }
      })
    },
    clickElectric() {
      //点击电瓶车
      let param={}
      param.id=this.chargingStation.id
      param.time=this.getCurrentTime()
      param.chargerCategory='电瓶车'
      let pageParam={}
      pageParam.pageSize=this.pageSize;
      pageParam.pageNum=this.pageNum;
      pageParam.param=param
      this.$axios.post('api/charger/chargerList',pageParam)
      .then(resp=>{
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargers=resp.data.data.list
          this.refreshChargerStatus(resp.data.data.list)
        }
      })
    },
    clickBus() {
      //点击大型公交车
      let param={}
      param.id=this.chargingStation.id
      param.time=this.getCurrentTime()
      param.chargerCategory='公交车'
      let pageParam={}
      pageParam.pageSize=this.pageSize;
      pageParam.pageNum=this.pageNum;
      pageParam.param=param
      this.$axios.post('api/charger/chargerList',pageParam)
      .then(resp=>{
        console.log(resp.data);
        if(resp.data.code==200) {
          this.chargers=resp.data.data.list
          this.refreshChargerStatus(resp.data.data.list)
        }
      })
    },
    refreshChargerStatus(chargerList) {
      let total=0
      let oranged=0
      let green=0
      let red=0
      let black=0
      for (let element of chargerList) {
        if(element.currentStatus=='充电中') {
          oranged++
        } else if(element.currentStatus=='空闲') {
          green++
        } else if(element.currentStatus=='离线') {
          red++
        } else if(element.currentStatus=='故障') {
          black++
        }
      }
      total=oranged+green+red+black
      this.chargingStation.totalStatusNum=total
      this.chargingStation.orangedStatusNum=oranged
      this.chargingStation.greenStatusNum=green
      this.chargingStation.redStatusNum=red
      this.chargingStation.blackStatusNum=black
    },
    nextPage(val) {
        this.pageNum=val
        this.getchargerListByStationId()
    },
    prevPage(val) {
        this.pageNum=val
        this.getchargerListByStationId()
    },
    skipPage(val) {
        this.pageNum=val
        this.getchargerListByStationId()
    },
    changeSizePage(val) {
        this.pageNum=1
        this.pageSize=val
        this.getchargerListByStationId()
    },
    firstPage() {
        this.pageNum=1
        this.getchargerListByStationId()
    },
    prevPage2() {
        if (this.pageNum>1) {
            this.pageNum=this.pageNum-1
            this.getchargerListByStationId()
        }
    },
    lastPage() {
        this.pageNum=Math.ceil(this.pageTotal/this.pageSize)
        this.getchargerListByStationId()
    },
    showSuccessMsg(message) {
        this.$message({
            message: message,
            type: 'success'
        });
    },
    showErrorMsg(message) {
        this.$message.error(message);
    },

  },

}
</script>

<style scoped>
.el-header{
  border: 1px solid grey;
}
.el-container{
  height: 100%;
}
.el-container .el-aside{
  border: 1px solid grey;
}
.el-container .el-main{
  border: 1px solid grey;
}
.el-radio-button {
  margin-right: 8px;
  border: 1px solid grey;
}
.search-input {
  width: 300px;
  right: 10px;
  position: absolute;
  top: 10px;
}
.el-icon-search {
  font-size:20px;
  margin-top: 10px;
}
.type-info1 {
  background-color:rgba(47, 163, 247, 0.156862745098039);
  width: 72px;
  height: 97px;
  align-items:center;
  margin-top: 10px;
}
.type-info2 {
  background-color:rgba(47, 163, 247, 0.156862745098039);
  width: 72px;
  height: 97px;
  align-items:center;
  margin-top: 10px;
  margin-left: 20px;
}
.type-info-div {
  align-items: center;
  padding-top: 10px;
}
.type-info-font {
  font-size: 25px;
  font-family: 'ArialMT', 'Arial', sans-serif;
}
.today-info-td {
  text-align: left;
  padding-left: 30px;
}
.today-info-font {
  font-size: 25px;
  font-family: 'ArialMT', 'Arial', sans-serif;
}
.status-info {
  text-align: left;
  align-items: center;
  margin-top: 15px;
  margin-left: 10px;
  white-space: nowrap;
}
.status-detail {
  align-items: center;
  margin-top: 15px;
  margin-left: 40px;
}
.status-detail-font {
  font-size: 20px;
  font-family: 'ArialMT', 'Arial', sans-serif;
}
</style>